<template>
  <div>
    <el-menu
      :default-active="defaultActive"
      mode="vertical"
      class="el-menu-vertical-demo"
      :collapse="isCollapse"
      :background-color="memuBg"
      text-color="#fff"
      active-text-color="#ffd04b"
      :show-timeout="300"
      :hide-timeout="300"
    >
      <!-- <el-menu-item> -->
      <Logo :isCollapse="isCollapse" />
      <!-- </el-menu-item> -->
      <sidebar-item :menu="menuData" :isCollapse="isCollapse"></sidebar-item>
    </el-menu>
  </div>
</template>
 
<script>
import sidebarItem from "./sidebarItem.vue";
import Logo from "../logo.vue";

import { mapGetters } from "vuex";
import config from "@/config/website.js";

export default {
  name: "sidebar",
  components: {
    Logo,
    sidebarItem,
  },
  computed: {
    ...mapGetters(["menu", "isCollapse"]),
    memuBg() {
      return config.menu.menuBg;
    },
    // nowTagValue: function () {
    //   // 路由控制展开
    //   return this.$router.$avueRouter.getValue(this.$route);
    // },
    menuData() {
      let menu = this.menu;
      // if (menu[0].path != "/production") {
      //   let index = menu.findIndex((a) => a.path == "/production");
      //   menu.splice(index, 1);
      // }
      return menu;
    },
  },
  watch: {
    $route: {
      handler: function (val, oldVal) {
        this.defaultActive = val.path;
      },
      immediate: true,
      // 深度观察监听
      deep: true,
    },
  },
  data() {
    return {
      defaultActive: "/login1",
    };
  },
  methods: {},
};
</script>
 
<style scoped lang = "less">
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.el-menu-vertical-demo {
  height: 100vh;
}
</style>